import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaInputLocale } from 'ecCom';

const getCurrentLabel = WeaInputLocale.getCurrentLabel;
const getMultiStrFromBase64 = WeaInputLocale.getMultiStrFromBase64;

@inject('portalLoginStore')
@observer
class E9CustomElement extends React.Component {
    render() {
        const { portalLoginStore, item } = this.props;
        const { state, getElementStyle } = portalLoginStore;
        const { langId } = state;
        if (item.type == 'image') {
            const { content, rotate } = item;
            if (item.linktype == undefined) {
                item.linktype = '0';// 0地址链接，1电子邮件链接
                item.linkmethoda = '1';// 地址链接  0当前页，1弹出页
                item.linkdza = '';// 地址
                item.linkdze = '';// 邮件收件人
                item.linktipa = '';// 地址悬停提示
                item.linktipe = '';// 邮件悬停提示
            }
            if (item.linktype == '0') {
                const style = {
                    transform: `rotate(${rotate}deg)`,
                    MsTransform: `rotate(${rotate}deg)`,
                    MozTransform: `rotate(${rotate}deg)`,
                    WebkitTransform: `rotate(${rotate}deg)`,
                    OTransform: `rotate(${rotate}deg)`,
                    opacity: item.opacity / 100,
                    cursor: item.linkdza != '' ? 'pointer' : 'default',
                };
                return (<img src={content}
                  title={getCurrentLabel(getMultiStrFromBase64(item.linktipa_base64), langId) || item.linktipa}
                  alt=""
                  className="e9login-element"
                  style={{ ...style, ...getElementStyle(item) }}
                  onClick={() => {
                    if (item.linkmethoda == '1') {
                        // 弹出页打开
                        if (item.linkdza != '') { window.open(item.linkdza, '_blank'); }
                    } else if (item.linkdza != '') { window.open(item.linkdza, '_self'); }
                }}
                />);
            }
                const style = {
                    transform: `rotate(${rotate}deg)`,
                    MsTransform: `rotate(${rotate}deg)`,
                    MozTransform: `rotate(${rotate}deg)`,
                    WebkitTransform: `rotate(${rotate}deg)`,
                    OTransform: `rotate(${rotate}deg)`,
                    opacity: item.opacity / 100,
                    cursor: item.linkdze != '' ? 'pointer' : 'default',
                };
                return item.linkdze != '' ?
                    <a href={`mailto:${item.linkdze}`}><img src={content} alt="" title={getCurrentLabel(getMultiStrFromBase64(item.linktipe_base64), langId) || item.linktipe} className="e9login-element" style={{ ...style, ...getElementStyle(item) }} /></a>
                    : <img src={content} alt="" title={getCurrentLabel(getMultiStrFromBase64(item.linktipe_base64), langId) || item.linktipe} className="e9login-element" style={{ ...style, ...getElementStyle(item) }} />;
        } else if (item.type == 'text') {
            const { content, color, fontSize, fontFamily, fontStyle, fontWeight, backgroundColor, opacity, textAlign, verticalAlign, textDecoration, rotate } = item;
            const style = {
                transform: `rotate(${rotate}deg)`,
                MsTransform: `rotate(${rotate}deg)`,
                MozTransform: `rotate(${rotate}deg)`,
                WebkitTransform: `rotate(${rotate}deg)`,
                OTransform: `rotate(${rotate}deg)`,
                backgroundColor,
                opacity: opacity / 100,
            };

            return (
                <div className="e9login-custom-text e9login-element" style={{ ...style, ...getElementStyle(item) }}>
                    <div className="e9login-custom-text-content" style={{ color, fontSize: `${fontSize}px`, fontFamily, fontStyle, fontWeight, textAlign, verticalAlign, textDecoration }} dangerouslySetInnerHTML={{ __html: content }} />
                </div>
            );
        }
            return <div />;
    }
}

export default E9CustomElement;

